import { init, h } from 'snabbdom'
import style from 'snabbdom/modules/style' //引入修改style插件
import eventListeners from 'snabbdom/modules/eventlisteners' //引入添加事件插件

const moives = [
    {
        Rank: getRandNumber(),
        Title: 'Fight Club',
        Description: 'An insomniac office worker looking for a way to change his life crosses paths with a devil- may-care soap maker and they form an underground fight club that evolves into something much, much more.'
    },
    {
        Rank: getRandNumber(),
        Title: 'The Good, the Bad and the Ugly',
        Description: 'A bounty hunting scam joins two men in an uneasy alliance against a third in a race to find a fortune in gold buried in a remote cemetery.'
    }, 
    {
        Rank: getRandNumber(),
        Title: '4 angry man',
        Description: 'A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.'
    }
]

let arr = moives.slice() //对数组进行浅拷贝
//初始化patch函数.
let patch = init([
    style,
    eventListeners
]) 
// 获取根节点
let app = document.querySelector('#app')
// 生成首次渲染的虚拟dom
let vnode = renderTable(moviceView)
// 对比 生成 虚拟dom
let oldVnode = patch(app, vnode)

// 封装 添加 DOM 的方法
function addMoviceItem(){
    add()
    renderView()
}

// 获取随机的参数
function getRandNumber (num = 10) {
    return Math.floor(Math.random() * num)
}

// 按照用户点击的 key 进行排序
function sortByKey (arr, key) {
    arr.sort((a, b) => {
        if (key === 'Rank') {
            return a[key] - b[key]
        }
        return a[key].localeCompare(b[key])
    })
    renderView()
}

// 从新排列
function moviceView () {
    let temp = []
    arr.map((item, key) => {
        temp.push(
            h('div', 
            {
                style: {
                    width: '100%',
                    display: 'flex',
                    justifyContent: 'space-between',
                    textAlign: 'center'
                }
            },
            [
                h('div', {style:{width: '10%'}}, item.Rank),
                h('div', {style:{width: '20%'}}, item.Title),
                h('div', {style:{width: '60%'}}, item.Description),
                h('div', {style:{width: '10%'}, on:{click: [remove, key]}}, 'x'),
        ]))
    })
    return temp
}

// 添加元素
function add () {
    let key = getRandNumber(2)
    let temp = moives.slice(key, key+1)
    arr = arr.concat(temp)
}

// 删除对应的元素
function remove (key) {
    arr.splice(key, 1)
    renderView()
}

function renderTable (renderMovice) {
    return h('div#main', 
        {
            style: {
                backgroundColor: 'rgb(206 206 206)'
            }
        },
        [
            h('h1', 'Top 10 Movies'),
            h('div', 
            {
                style: {
                    width: '100%',
                    display: 'flex',
                    justifyContent: 'space-between'
                }
            },
            [
                h('div', 
                [
                    h('span', 'Sort by:'),
                    h('span', 
                    {
                        on: {
                            click: [sortByKey, arr, 'Rank']
                        }
                    },
                    'Rank'),
                    h('span', 
                    {
                        on: {
                            click: [sortByKey, arr, 'Title']
                        }
                    },
                    'Title'),
                    h('span', 
                    {
                        on: {
                            click: [sortByKey, arr, 'Description']
                        }
                    },
                    'Description')
                ]),
                h('div', h('span', {on: {click: addMoviceItem}}, 'add')),
            ]),
            h('div#movices', renderMovice())
        ]
    )
}

function renderView () {
    oldVnode = vnode
    vnode = renderTable(moviceView)
    patch(oldVnode, vnode)
}